<template>
  <div class="table-container">
    <div class="table-title">与国网结算表</div>
    <div class="formula-detail">
      <el-collapse class="formula-collapse" v-model="activeNames" accordion @change="handleChange">
        <el-collapse-item title="公式详情" name="1">
          <div class="formula">预测电费 = 预测电量 * 单价</div>
          <div class="formula">实际电费 = 实际电量 * 单价</div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      lazy
      border
      :tree-props="{ children: 'children' }"
    >
      <el-table-column prop="category" label="分类" width="170"></el-table-column>
      <el-table-column label="预测数">
        <el-table-column prop="fore_electric" label="电量" width="120"></el-table-column>
        <el-table-column prop="fore_price" label="单价"></el-table-column>
        <el-table-column prop="fore_cost" label="电费"></el-table-column>
      </el-table-column>
      <el-table-column label="结算数">
        <el-table-column prop="settle_electric" label="电量" width="120">
          <template #default="scope">
            <el-input
              v-show="scope.row.isEdit"
              size="small"
              v-model="scope.row.settle_electric"
            ></el-input>
            <span v-show="!scope.row.isEdit">{{ scope.row.settle_electric }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="settle_price" label="单价"></el-table-column>
        <el-table-column prop="settle_cost" label="电费">
          <template #default="scope">
            <el-input
              v-show="scope.row.isEdit"
              size="small"
              v-model="scope.row.settle_cost"
            ></el-input>
            <span v-show="!scope.row.isEdit">{{ scope.row.settle_cost }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="实际数">
        <el-table-column prop="actual_electric" label="电量" width="120"></el-table-column>
        <el-table-column prop="actual_price" label="单价"></el-table-column>
        <el-table-column prop="actual_cost" label="电费"></el-table-column>
      </el-table-column>
      <el-table-column label="差额">
        <el-table-column prop="dif_electric" label="电量" width="120"></el-table-column>
        <el-table-column prop="dif_price" label="单价"></el-table-column>
        <el-table-column prop="dif_cost" label="电费"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'Settle',
  inheritAttrs: false,
});

const tableData = reactive([
  {
    id: 1,
    category: '一、保障性电源',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    settle_electric: '',
    settle_price: '',
    settle_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    children: [
      {
        id: 11,
        category: '网内电源',
        fore_electric: '',
        fore_price: '',
        fore_cost: '',
        settle_electric: '',
        settle_price: '',
        settle_cost: '',
        actual_electric: '',
        actual_price: '',
        actual_cost: '',
        dif_electric: '',
        dif_price: '',
        dif_cost: '',
      },
      {
        id: 12,
        category: '网间或其他电源',
        fore_electric: '',
        fore_price: '',
        fore_cost: '',
        settle_electric: '',
        settle_price: '',
        settle_cost: '',
        actual_electric: '',
        actual_price: '',
        actual_cost: '',
        dif_electric: '',
        dif_price: '',
        dif_cost: '',
      },
    ],
  },
  {
    id: 2,
    category: '二、工商业电源',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    settle_electric: '',
    settle_price: '',
    settle_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    children: [
      {
        id: 21,
        category: '网内电源',
        fore_electric: '',
        fore_price: '',
        fore_cost: '',
        settle_electric: '',
        settle_price: '',
        settle_cost: '',
        actual_electric: '',
        actual_price: '',
        actual_cost: '',
        dif_electric: '',
        dif_price: '',
        dif_cost: '',
      },
      {
        id: 22,
        category: '网间或其他电源',
        fore_electric: '',
        fore_price: '',
        fore_cost: '',
        settle_electric: '',
        settle_price: '',
        settle_cost: '',
        actual_electric: '',
        actual_price: '',
        actual_cost: '',
        dif_electric: '',
        dif_price: '',
        dif_cost: '',
      },
    ],
  },
  {
    id: 3,
    category: '三、销售电量',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    settle_electric: '',
    settle_price: '',
    settle_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    children: [
      {
        id: 31,
        category: '居民生活用电',
        fore_electric: '',
        fore_price: '',
        fore_cost: '',
        settle_electric: '',
        settle_price: '',
        settle_cost: '',
        actual_electric: '',
        actual_price: '',
        actual_cost: '',
        dif_electric: '',
        dif_price: '',
        dif_cost: '',
      },
      {
        id: 32,
        category: '农业生产用电',
        fore_electric: '',
        fore_price: '',
        fore_cost: '',
        settle_electric: '',
        settle_price: '',
        settle_cost: '',
        actual_electric: '',
        actual_price: '',
        actual_cost: '',
        dif_electric: '',
        dif_price: '',
        dif_cost: '',
      },
      {
        id: 33,
        category: '农业排灌用电',
        fore_electric: '',
        fore_price: '',
        fore_cost: '',
        settle_electric: '',
        settle_price: '',
        settle_cost: '',
        actual_electric: '',
        actual_price: '',
        actual_cost: '',
        dif_electric: '',
        dif_price: '',
        dif_cost: '',
      },
      {
        id: 34,
        category: '工商业电量',
        fore_electric: '',
        fore_price: '',
        fore_cost: '',
        settle_electric: '',
        settle_price: '',
        settle_cost: '',
        actual_electric: '',
        actual_price: '',
        actual_cost: '',
        dif_electric: '',
        dif_price: '',
        dif_cost: '',
      },
    ],
  },
  {
    id: 4,
    category: '四、线损电量',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    settle_electric: '',
    settle_price: '',
    settle_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
  },
  {
    id: 5,
    category: '五、与国网交易电量',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    settle_electric: '',
    settle_price: '',
    settle_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    children: [
      {
        id: 51,
        category: '(一)上网电量',
        fore_electric: '',
        fore_price: '',
        fore_cost: '',
        settle_electric: '',
        settle_price: '',
        settle_cost: '',
        actual_electric: '',
        actual_price: '',
        actual_cost: '',
        dif_electric: '',
        dif_price: '',
        dif_cost: '',
      },
      {
        id: 52,
        category: '(二)下网电量',
        fore_electric: '',
        fore_price: '',
        fore_cost: '',
        settle_electric: '',
        settle_price: '',
        settle_cost: '',
        actual_electric: '',
        actual_price: '',
        actual_cost: '',
        dif_electric: '',
        dif_price: '',
        dif_cost: '',
        children: [
          {
            id: 521,
            category: '其中 110KV',
            fore_electric: '',
            fore_price: '',
            fore_cost: '',
            settle_electric: '',
            settle_price: '',
            settle_cost: '',
            actual_electric: '',
            actual_price: '',
            actual_cost: '',
            dif_electric: '',
            dif_price: '',
            dif_cost: '',
            isEdit: true,
          },
          {
            id: 522,
            category: '35KV',
            fore_electric: '',
            fore_price: '',
            fore_cost: '',
            settle_electric: '',
            settle_price: '',
            settle_cost: '',
            actual_electric: '',
            actual_price: '',
            actual_cost: '',
            dif_electric: '',
            dif_price: '',
            dif_cost: '',
            isEdit: true,
          },
          {
            id: 523,
            category: '10KV',
            fore_electric: '',
            fore_price: '',
            fore_cost: '',
            settle_electric: '',
            settle_price: '',
            settle_cost: '',
            actual_electric: '',
            actual_price: '',
            actual_cost: '',
            dif_electric: '',
            dif_price: '',
            dif_cost: '',
            isEdit: true,
          },
        ],
      },
      {
        id: 53,
        category: '1.保障性电量(含线损)',
        fore_electric: '',
        fore_price: '',
        fore_cost: '',
        settle_electric: '',
        settle_price: '',
        settle_cost: '',
        actual_electric: '',
        actual_price: '',
        actual_cost: '',
        dif_electric: '',
        dif_price: '',
        dif_cost: '',
        children: [
          {
            id: 531,
            category: '居民生活用电',
            fore_electric: '',
            fore_price: '',
            fore_cost: '',
            settle_electric: '',
            settle_price: '',
            settle_cost: '',
            actual_electric: '',
            actual_price: '',
            actual_cost: '',
            dif_electric: '',
            dif_price: '',
            dif_cost: '',
          },
          {
            id: 532,
            category: '农业生产用电',
            fore_electric: '',
            fore_price: '',
            fore_cost: '',
            settle_electric: '',
            settle_price: '',
            settle_cost: '',
            actual_electric: '',
            actual_price: '',
            actual_cost: '',
            dif_electric: '',
            dif_price: '',
            dif_cost: '',
          },
          {
            id: 533,
            category: '农业排灌用电',
            fore_electric: '',
            fore_price: '',
            fore_cost: '',
            settle_electric: '',
            settle_price: '',
            settle_cost: '',
            actual_electric: '',
            actual_price: '',
            actual_cost: '',
            dif_electric: '',
            dif_price: '',
            dif_cost: '',
          },
        ],
      },
      {
        id: 54,
        category: '2.工商业电量',
        fore_electric: '',
        fore_price: '',
        fore_cost: '',
        settle_electric: '',
        settle_price: '',
        settle_cost: '',
        actual_electric: '',
        actual_price: '',
        actual_cost: '',
        dif_electric: '',
        dif_price: '',
        dif_cost: '',
        children: [
          {
            id: 541,
            category: '市场化购电量',
            fore_electric: '',
            fore_price: '',
            fore_cost: '',
            settle_electric: '',
            settle_price: '',
            settle_cost: '',
            actual_electric: '',
            actual_price: '',
            actual_cost: '',
            dif_electric: '',
            dif_price: '',
            dif_cost: '',
          },
          {
            id: 542,
            category: '委托代理购电量',
            fore_electric: '',
            fore_price: '',
            fore_cost: '',
            settle_electric: '',
            settle_price: '',
            settle_cost: '',
            actual_electric: '',
            actual_price: '',
            actual_cost: '',
            dif_electric: '',
            dif_price: '',
            dif_cost: '',
          },
        ],
      },
      {
        id: 55,
        category: '3.网间输配电',
        fore_electric: '',
        fore_price: '',
        fore_cost: '',
        settle_electric: '',
        settle_price: '',
        settle_cost: '',
        actual_electric: '',
        actual_price: '',
        actual_cost: '',
        dif_electric: '',
        dif_price: '',
        dif_cost: '',
      },
    ],
  },
]);

const activeNames = ref('1');
const handleChange = (val: any) => {};

const getTotal = (row: any) => {
  let total = 0;
  if (row.foundation) {
    total += row.foundation * 1;
  }
  if (row.addition) {
    total += row.addition * 1;
  }
  if (row.max_fund) {
    total += row.max_fund * 1;
  }
  if (row.after) {
    total += row.after * 1;
  }
  return total;
};

onMounted(() => {
  console.log('onmm');
});
</script>

<style lang="scss" scoped>
.formula-detail {
  display: flex;
  justify-content: flex-end;
}
.formula-collapse {
  max-width: 100%;
  border-radius: 10px;
  background-color: #ffffff;
  padding-left: 10px;

  :deep(.el-collapse-item__header) {
    color: #4080ff;
    background-color: transparent;
  }
}
.formula {
  padding: 5px;
}
</style>
